<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/product/pro_list.css">
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <!--======================== header ========================= -->
        <div id="header">
            <div class="logo">
                <a href="">随风</a>
                <img src="../images/index/logo.jpg" alt="">
            </div>
            <div class="nav">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">去旅行</a></li>
                    <li><a href="">个人中心</a></li>
                    <a href="javascript:void(0)" class="box">
                        <input type="text" class="box-search">
                    </a>
                    <div class="search-btn">
                        <a class="btn" href="javascript:void(0)">
                            <i class="icon-search"></i>
                        </a>
                    </div>
                </ul>
            </div>
            <div class="login">
                <a href="../customer/login.html">登录</a>
                <span class="split">|</span>
                <a href="../customer/registe.html">注册</a>
            </div>
        </div>
        <!--======================== banner ========================= -->
        <div id="banner">
            <div class="banner-hd">
                <a href="javascript:void(0)" class="curS curU">全部</a>
                <a href="javascript:void(0)" class="curU">一日游</a>
                <a href="javascript:void(0)" class="curU">亲子游</a>
                <a href="javascript:void(0)" class="curU">多日游</a>
            </div>
            <div class="banner-bd">
                <div class="row">
                    <span>预订时限:</span>
                    <ul>
                        <li class="p1">
                            <input type="checkbox" name="time">
                            <span>不限</span>
                        </li>
                        <li class="p2">
                            <input type="checkbox" name="time">
                            <span>可订今日</span>
                        </li>
                        <li class="p2">
                            <input type="checkbox" name="time">
                            <span>可订明日</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--======================== content ========================= -->
            <div class="content">
                <div class="content-hd">
                    <ul>
                        <li>
                            <a href="javascript:void(0)" class="activeS activeU">
                                综合排序
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="activeU">
                                <select id="price">
                                    <option>价格</option>
                                    <option value="asc">价格从低到高</option>
                                    <option value="desc">价格从高到低</option>
                                </select>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="activeU">
                                <select id="goTime">
                                    <option>出发时间</option>
                                    <option value="today">可订今日</option>
                                    <option value="tomorrow">可订明日</option>
                                </select>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="content-list">
                    <a href="pro_details.html">
                        <div class="image">
                            <img src="../images/pro4.jpg" alt="">
                            <span class="image-area">
                                <strong>苏州出发</strong>
                                <span>一日游</span>
                            </span>
                        </div>
                        <div class="details">
                            <div class="info">
                                <p>已售1471</p>
                                <h3>
                                    苏州拙政园门票电子票（凭身份证入园 快速出票）
                                </h3>
                                <p>店铺:&nbsp随风旅游</p>
                            </div>
                            <div class="extra">
                                <div class="action">
                                    <span class="btn">立即预订</span>
                                </div>
                                <span class="price">
                                    <b>￥</b>
                                    <strong>83</strong>起
                                </span>
                            </div>
                        </div>
                    </a>
                    <a href="">
                        <div class="image">
                            <img src="../images/pro4.jpg" alt="">
                            <span class="image-area">
                                <strong>苏州出发</strong>
                                <span>一日游</span>
                            </span>
                        </div>
                        <div class="details">
                            <div class="info">
                                <p>已售1471</p>
                                <h3>
                                    苏州拙政园门票电子票（凭身份证入园 快速出票）
                                </h3>
                                <p>店铺:&nbsp随风旅游</p>
                            </div>
                            <div class="extra">
                                <div class="action">
                                    <span class="btn">立即预订</span>
                                </div>
                                <span class="price">
                                    <b>￥</b>
                                    <strong>83</strong>起
                                </span>
                            </div>
                        </div>
                    </a>
                    <a href="">
                        <div class="image">
                            <img src="../images/pro4.jpg" alt="">
                            <span class="image-area">
                                <strong>苏州出发</strong>
                                <span>一日游</span>
                            </span>
                        </div>
                        <div class="details">
                            <div class="info">
                                <p>已售1471</p>
                                <h3>
                                    苏州拙政园门票电子票（凭身份证入园 快速出票）
                                </h3>
                                <p>店铺:&nbsp随风旅游</p>
                            </div>
                            <div class="extra">
                                <div class="action">
                                    <span class="btn">立即预订</span>
                                </div>
                                <span class="price">
                                    <b>￥</b>
                                    <strong>83</strong>起
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div class="side">
                <h3>本周热卖</h3>
                <ul>
                    <li>
                        <a href="">
                            <span class="mge">
                                <img src="../images/promin1.jpg">
                            </span>
                            <div class="title">
                                苏州拙政园门票电子票（凭身份证入园 快...
                            </div>
                            <span class="side-price">¥83起</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="mge">
                                <img src="../images/promin1.jpg">
                            </span>
                            <div class="title">
                                苏州拙政园门票电子票（凭身份证入园 快...
                            </div>
                            <span class="side-price">¥83起</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../js/product/pro_list.js"></script>